<template>
	<w-container class="page-bg">
		<detail-list-screen @change="changeScreen"></detail-list-screen>
		<view class="content bg-color-item" v-if="list.length">
			<view class="item" v-for="(item,idx) in list" :key="idx">
				<view>
					<view class="font-size-16 font-color-textPrimary text-overflow">{{ item.memo }}</view>
					<view class="font-size-10 font-color-999 mt-4">{{ $u.timeFormat(item.createtime, 'yyyy.mm.dd hh:MM:ss') }}</view>
				</view>
				<view class="flex-center">
					<w-icon :name="crystalIcon(item.model)" size="20"></w-icon>
					<text class="ml-10 font-size-20 font-color-price">{{ item.crystal }}</text>
				</view>
			</view>
		</view>
		<!-- 加载 -->
		<w-loading :type="loadingType" emptyType="search" class="mt-12" emptyTop="200"></w-loading>
	</w-container>
</template>

<script>
	import detailListScreen from './components/detail-list-screen.vue';
	import { crystalDetail } from '@/api/shop/shop.js';
	import crystalMixin from '@/mixins/crystalMixin.js';
	export default {
		components:{ detailListScreen },
		mixins:[crystalMixin],
		data() {
			return {
				param:{ page:1 },
				
				list:[],
				isNext:true,
				loadingType:'none'
			};
		},
		created() {
			this.getList();
		},
		methods:{
			// 刷新
			refresh() {
				this.list = []
				this.isNext = true
				this.loadingType = 'none'
				this.getList()
			},
			
			// 顶部筛选
			changeScreen(e) {
				// Object.assign(this.param,e)
				this.param = { page:1,...e };
				this.refresh()
			},
			
			// 获取列表
			getList() {
				if(!this.isNext) return;
				this.loadingType = 'loading';
				crystalDetail(this.param).then(res=>{
					uni.stopPullDownRefresh()
					let { data,last_page } = res.data;
					this.list = [...this.list,...data];
					if(this.param.page<last_page){
						this.param.page++;
					}else{
						this.isNext = false;
						this.loadingType = 'nomore';
					}
					!data.length && (this.loadingType = 'empty');
				}).catch(()=>{ this.loadingType = 'empty';uni.stopPullDownRefresh() })
			}
		},
		onReachBottom() {
			this.getList() 
		},
		onPullDownRefresh() {
			this.param.page = 1;
			this.refresh()
		}
	}
</script>

<style lang="scss">
	.page-bg{ padding-bottom: 100rpx; }
	.content{
		width: calc(100% - 64rpx);
		margin-left: 32rpx;
		// margin-top: 32rpx;
		padding: 32rpx;
		border-radius: 20rpx;
		
		>.item{
			width: 100%;
			height: 136rpx;
			border-bottom: 2rpx solid #eee;
			@extend .flex-center-sb;
			&:nth-last-of-type(1) {
				border: none;
			}
		}
	}
</style>
